import { ref } from 'vue';
import { useTimer } from './useTimer';

/**
 * 节流 hook
 * @param fn 需要节流的函数
 * @param delay 延迟时间，默认 300ms
 */
export function useThrottle<T extends (...args: any[]) => any>(fn: T, delay = 300) {
  // 上次执行时间
  const last = ref<number>(0);
  const { set, clear } = useTimer();

  // 创建节流函数
  const throttled = (...args: Parameters<T>) => {
    const now = Date.now();

    // 首次执行或者距离上次执行超过延迟时间，立即执行
    if (now - last.value > delay) {
      fn(...args);
      last.value = now;
    } else {
      // 否则，设置新的定时器
      set(() => {
        fn(...args);
        last.value = Date.now();
      }, delay);
    }
  };

  return {
    throttled,
    clear,
  };
}

/**
 * 使用示例：
 * const { throttled } = useThrottle(() => {
 *   console.log('滚动事件');
 * }, 500);
 * 
 * // 在模板中使用
 * <div @scroll="throttled">
 *   // 滚动内容
 * </div>
 */